<%@ page import="net.tribal.comic.entities.Comment" %>

<div class="rounded-corners">
	<div class="navButtons rounded-corners">
		<h2 class="left"><g:message code="title.comment.list"/></h2>
	</div>
	
	<div id="comment-buttons">
		<g:if test="${flash.message}">
			<div class="message rounded-corners" ><g:message code="${flash.message}" args="${flash.args}"/></div>
		</g:if>
		
		<usr:isUser>
			<g:remoteLink controller="comment" action="create" params="['commentToId':commentToId, 'commentToName':commentToName]" update="commentWrapper" onComplete="showComment(); setEnviroment();"><g:message code="comment.new.label" default="Agregar comentario"/></g:remoteLink>
		</usr:isUser>
		<g:remoteLink controller="${commentToName}" action="comments" params="['commentToId':commentToId, 'commentToName':commentToName]" update="commentWrapper" onComplete="showComment(); setEnviroment();"><g:message code="default.refresh.label" default="Actualizar"/></g:remoteLink>
	</div>

	<g:hiddenField name="commentToName" value="${commentToName}" />
	<g:hiddenField name="commentToId" value="${commentToId}"/>

	<div id="comment-list" style="overflow-y:scroll;">
		<g:if test="${commentInstanceList}">
		  	<g:each in="${commentInstanceList}" status="i" var="commentInstance">
			    <g:render template="/comment/show" model="['commentInstance':commentInstance, 'commentToId':commentToId, 'commentToName':commentToName]"/>
			</g:each>
	    </g:if>
	    <g:else>
			<g:message code="default.no.comments"/>
		</g:else>
	</div>
	<script type="text/javascript">
		if($j(".comment").length > 0){
			$j(".comment div.navButtons").fadeTo("fast", 0);
			//Se quita el comportamiento
			$j(".comment").unbind();
			//Se les agrega el comportamiento de fadeIn/Out
			$j(".comment").mouseenter(function(){
				$j(this).find("div.navButtons").fadeTo("fast", 1);
			});
			$j(".comment").mouseleave(function(){
				$j(this).find("div.navButtons").fadeTo("fast", 0);
			});
		}
	</script>
</div>